<template>
    <div class="car-details">
<el-row>
    <el-col :push="2" :span="1">
    <input v-model="SelectCarInfoForm.licensePlate" placeholder="请输入车牌号"  @change="selectCarlicensePlate"/>
</el-col>    

<el-col :push="5" :span="1">
    <input v-model="SelectCarInfoForm.model" placeholder="请输入车辆类型如suv"  @change="selectmodel"/>
</el-col>    
<el-col :push="8" :span="1">
    <input v-model="SelectCarInfoForm.carColor" placeholder="请输入车辆颜色"  @change="selectcarColor"/>
</el-col>    
</el-row>




  <!-- 对话框 -->
  <el-dialog v-model="dialogVisible" width="80%" center @close="onDialogClose">
        <img :src="currentImage" alt="放大后的图片" class="enlarged-photo" />
      </el-dialog>

      <el-table :data="carList" border style="width: 100%; margin-top: 20px;">
  
        <!-- 汽车信息 -->
        <el-table-column prop="carId" label="汽车ID" width="180" />
        <el-table-column prop="licensePlate" label="车牌号" width="180" />
        <el-table-column prop="model" label="车型" />
        <el-table-column prop="carColor" label="颜色" />
        <el-table-column prop="mileage" label="里程数 (km)" />
  
        <el-table-column
              prop="maintenanceTime"
              label="下次保养时间"
              width="120">
              <template #default="scope">
                {{ formatDateTime(scope.row.maintenanceTime) }}
              </template>
            </el-table-column>

            <el-table-column
              prop="creationTime"
              label="创建时间"
              width="120">
              <template #default="scope">
                {{ formatDateTime(scope.row.creationTime) }}
              </template>
            </el-table-column>

            <el-table-column
              prop="recordTime"
              label="记录时间"
              width="120">
              <template #default="scope">
                {{ formatDateTime(scope.row.recordTime) }}
              </template>
            </el-table-column>

        <el-table-column prop="carStatus" label="状态" :formatter="formatCarStatus" />
        <el-table-column prop="notes" label="备注" />
        <el-table-column prop="carImage" label="图片">
          <template #default="scope">
            <img v-if="scope.row.carImage" :src="scope.row.carImage" alt="汽车图片" class="car-image" @click="showImage(scope.row.carImage)"  />
          </template>
        </el-table-column>
        <el-table-column prop="typeName" label="系列" />
        <el-table-column prop="subTypes" label="品牌" />

  <el-table-column fixed="right" label="操作" width="200">
    <template #default="scope">
      <el-button type="text" @click="See(scope.row)">查看车主电话</el-button>
    </template>
  </el-table-column>


<!-- 
        <el-table-column fixed="right" label="操作" width="100">
          <template #default="scope">



            <el-popover
    placement="top-start"
    title="Title"
    :width="200"
    trigger="hover"
    content="this is content, this is content, this is content"
  >
    <template #reference>
      <el-button class="m-2">Hover to activate</el-button>
    </template>
  </el-popover>


            <el-button type="text" @click="See(scope.row)">查看车主电话</el-button>
          </template>
        </el-table-column> -->
      </el-table>


      <div class="demo-pagination-block" style="margin-top: 20px;">
    <el-pagination
      v-model:current-page="SelectCarInfoForm.current"
      v-model:page-size="SelectCarInfoForm.size"
      :page-sizes="[1, 4, 8,10]"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>







      <el-dialog
    v-model="issss"
    title="车主电话信息如下"
    width="500"
    :before-close="handleClose"
  >
   <el-row> <span>车主姓名：{{ userInfo.userName }}</span></el-row>
<el-row><span>车主电话：{{ userInfo.userPhone }}</span></el-row>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="issss = false" type="text">关闭</el-button>
        
      </div>
    </template>
  </el-dialog>
    </div>
  </template>
  
  <script>
  export default {
    name: 'CarDetailsTable',
    data() {
      return {
        dialogVisible: false,
        currentImage: '',
        carList: [],
        SelectCarInfoForm:{
            current: 1,
            size: 10,
            licensePlate:null,
            model:null,
            carColor:null,
           
        },
        userId: null,
        userInfo:{

        },
        issss:false,
        total: 0,
      };
    },
    methods: {
           // 展示图片
      showImage(imageSrc) {
        this.currentImage = imageSrc;
        this.dialogVisible = true;
      },
  
      // 关闭对话框时触发
      onDialogClose() {
        this.currentImage = '';
      },
  
        selectcarColor(){
        if(this.SelectCarInfoForm.carColor==null){
            alert("请输入颜色")
            return
        }
        this.getCar()

        },
        selectmodel(){
            if(this.SelectCarInfoForm.model==null){
               alert('请输入车辆型号')
                return
            }
            this.getCar()

        },
        selectCarlicensePlate(){
            if(this.SelectCarInfoForm.licensePlate==null){
                alert("请输入车牌号")
                return
            }
            this.getCar()
        },
        handleCurrentChange(val){
            this.SelectCarInfoForm.current=val
            this.getCar()
        },
     
        handleSizeChange(val){
            this.SelectCarInfoForm.size=val
            this.getCar()
        },
        See(obj){
            this.userId=obj.userId
            this.$http.get("/user/userInfo/getUserInfoByUserId",{
                params:{
                    userId:this.userId
                }
            }).then(resp => {
              if(resp.data.code === 200){
                this.userInfo=resp.data.data
                console.log(this.userInfo)
                this.issss=true
               
              }


        }).catch(error => {
          console.error("获取失败:", error);
          this.$message.error("获取失败，请稍后再试。");
        });
        },


        formatDateTime(dateTimeString) {
             const date = new Date(dateTimeString);
             const year = date.getFullYear();
             const month = String(date.getMonth() + 1).padStart(2, '0');
             const day = String(date.getDate()).padStart(2, '0');
             const hours = String(date.getHours()).padStart(2, '0');
             const minutes = String(date.getMinutes()).padStart(2, '0');
             const seconds = String(date.getSeconds()).padStart(2, '0');

             return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
           },





          formatCarStatus(row, column, cellValue) {
        const statusMap = {
          0: '待处理',
          1: '正常',
          2: '维修中',
          3: '报废'
          // 添加其他状态映射...
        };
        return statusMap[cellValue] || '未知状态';
      },
      getCar(){
        console.log(this.SelectCarInfoForm)
    this.$http.post("/car/carInfo/NearTermMaintenanceRequired",this.SelectCarInfoForm).then(resp => {
          if(resp.data.code === 200){
            this.carList = resp.data.data.records;
            this.total = resp.data.data.total;
          }
          }).catch(error => {
          console.error("获取失败:", error);
          this.$message.error("获取失败，请稍后再试。");
        });
    },

    },
    mounted() {
      this.getCar();
    }
  };
  </script>
  
  <style scoped>
  .car-details .car-image {
    max-width: 50px;
    height: auto;
  }
  </style>